<template>
<!--  <div class="Contract-container">-->
<!--  </div>-->
  <detail-structure :bg="contactBg" title="联系我们" first-sentence="拥有不一样的平台，图慧人，诚信、专注、高效、感恩。" >
    <template #content>
      <div class="introduction-container">
        <div class="title">
          {{ person.profile }}
        </div>
        <h2 style="text-align: center">{{ person.company }}</h2>
        <div class="profile-container">
          <div class="AboutFlex">
            <h2>{{ person.surveyingNum }}年+</h2>
            <p>{{ person.surveying }}</p>
          </div>
          <div class="AboutFlex">
            <h2>{{ person.geographicNum }}年+</h2>
            <p>{{ person.geographic }}</p>
          </div>
          <div class="AboutFlex">
            <h2>{{ person.personnelNum }}%+</h2>
            <p>{{ person.personnel }}</p>
          </div>
        </div>
        <div class="Tuhui-container">
          <p>　　  {{ person.content }}</p>
          <p>{{ person.text }}</p>
          <p>　　  {{ person.contend }}</p>
        </div>
      </div>

      <div class="culture-container">
        <div class="title">
          {{ person.culture }}
        </div>
        <div class="company-container">
          <div class="company-left compony">
            <div class="image-content">
            </div>
            <div class="text-content">
              <h3 class="titles">{{ person.vision }}</h3>
              <p class="discription">{{ person.technological }}</p>
            </div>
          </div>
          <div class="company-right compony">
            <div class="image-content">
            </div>
            <div class="text-content">
              <h3 class="titles">{{ person.philosophy }}</h3>
              <p class="discription">{{ person.integrity }}</p>
            </div>
          </div>
          <div class="company-Lower-left compony">
            <div class="image-contents">
            </div>
            <div class="text-content">
              <h3 class="titles">{{ person.training }}</h3>
            </div>
          </div>
          <div class="company-Lower-right compony">
            <div class="image-contentd">
            </div>
            <div class="text-content">
              <h3 class="titles">{{ person.league }}</h3>
            </div>
          </div>
        </div>
      </div>

      <div class="us-container">
        <div class="title">
          联系我们
        </div>
        <div class="display-container display-right">
          <div class="text-container">
            <div class="display-title">{{ person.company }}</div>
            <p class="display-content">公司地址：{{ person.address }}</p>
            <p class="display-content1">联系电话：{{ person.phone }}</p>
            <p class="display-content1">联系邮箱：{{ person.email }}</p>

          </div>
          <div id="allmap">
          </div>
        </div>
      </div>
    </template>
  </detail-structure>
</template>

<script setup>
import {onMounted, reactive} from "vue";
import {contact} from "@/utils/data.js";
import DetailStructure from "@/components/common/DetailStructure.vue";
import contactBg from '@/assets/imgs/contact/contactBg.jpg';

const person = contact;// 获取数据
// 初始化地图
const init = () => {
  let AMap = window.AMap;
  const map = new AMap.Map("allmap", {
    zoom: 18, //级别
    center: [person.longitude, person.latitude], //中心点坐标
    viewMode: '3D',
    mapStyle: "amap://styles/0b32011631047839586faf6390104fd1", //自定义地图的显示样式
  });
  // console.log("map", map);
  const marker = new AMap.Marker({
    position: [person.longitude, person.latitude],
    icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
    anchor: 'bottom-center',
    offset: new AMap.Pixel(0, 0)
  });
  marker.setMap(map);
  // 设置鼠标划过点标记显示的文字提示
  marker.setTitle('广州图慧信息科技有限公司');
  // 设置label标签
  // label默认蓝框白底左上角显示，样式className为：amap-marker-label
  marker.setLabel({
    direction: 'right',
    offset: new AMap.Pixel(10, 0),  //设置文本标注偏移量
    content: "<div class='info'>广州图慧信息科技有限公司</div>", //设置文本标注内容
  });
};
// 加载地图
const loadMapScript = () => {
  let script = document.createElement("script");
  script.type = "text/javascript";
  script.className = "loadmap"; // 给script一个类名
  script.src =
      "https://webapi.amap.com/maps?v=2.0&key=5567127c62e2129e3ddaa437ea377a4b";
  script.onload = () => {
    init();
  };
  let loadmap = document.getElementsByClassName("allmap");
  if (loadmap) {
    // 每次append script之前判断一下，避免重复添加script资源标签
    for (let i = 0; i < loadmap.length; i++) {
      document.body.removeChild(loadmap[i]);
    }
  }
  document.body.appendChild(script);
};
onMounted(() => {
  loadMapScript(); // 加载百度地图资源
});
</script>

<style lang="scss" scoped>

.us-container, .culture-container, {
  margin: 0px auto;
  position: relative;
  width: 1220px;
  padding-top: 40px;
  @include flex($direc: column, $col: center);

  .title {
    font-size: 29px;
    font-weight: bold;
    text-align: center;
  }

  .display-container {
    padding: 20px 20px;
    width: 85%;
    user-select: none;
    cursor: pointer;
    @include flex();

    .text-container {
      width: 40%;
      @include flex($direc: column,);

      .display-title {
        font-size: 24px;
        line-height: 30px;
        color: rgb(51, 51, 51);
      }

      .display-content {
        padding-top: 20px;
        white-space: normal;
        margin-top: 0px;
        margin-bottom: 0px;
        word-break: break-word;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        color: rgb(102, 102, 102);
        font-size: 15px;
      }

      .display-content1 {
        padding-top: 10px;
        white-space: normal;
        margin-top: 0px;
        margin-bottom: 0px;
        word-break: break-word;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        color: rgb(102, 102, 102);
        font-size: 15px;
      }

    }

    #allmap {
      width: 60%;
      height: 37vh;
    }
  }
}

.culture-container {
  .company-container, .company-container {
    margin: 20px 0 0px;
    width: 100%;
    display: inline-flex;
    gap: 50px;
    flex-wrap: wrap;

    .compony {
      position: relative;
      display: inline-block;
      width: calc(50% - 25px);
      height: auto;

      .image-content {
        width: 585px;
        height: 320px;
        background: $themeColor;
      }

      .image-contents {
        width: 585px;
        height: 320px;
        background: url("src/assets/imgs/px.jpg") no-repeat;
        background-size: 100% 100%;
      }

      .image-contentd {
        width: 585px;
        height: 320px;
        background: url("src/assets/imgs/tj.jpg") no-repeat;
        background-size: 100% 100%;
      }

      .image-contentd {
        width: 585px;
        height: 320px;
        background: url("src/assets/imgs/tj.jpg") no-repeat;
        background-size: 100% 100%;
      }

      .text-content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;

        .titles {
          margin-top: 10%;
          padding-left: 50px;
          font-size: 29px;
          color: #ffffff;
        }

        .discription {
          margin-top: 12%;
          font-size: 20px;
          padding-left: 50px;
          color: #ffffff;
        }
      }
    }
  }
}

.introduction-container {
  display: block;
  margin: 0px auto;
  position: relative;
  width: 1220px;
  padding-top: 40px;
  overflow: hidden;

  .title {
    font-size: 29px;
    font-weight: bold;
    text-align: center;
  }

  .profile-container {
    margin: 80px auto 130px;

    .AboutFlex {
      float: left;
      width: 33.3%;
      line-height: 24px;
      color: #666;
      font-size: 14px;
      text-align: center;
      position: relative;

    }

    .AboutFlex h2 {
      color: $themeColor;
      font-size: 36px;
      margin-bottom: 20px;
      text-align: center;
    }

    .AboutFlex:after {
      content: '';
      width: 1px;
      height: 97px;
      background-color: $themeColor;
      opacity: 0.3;
      position: absolute;
      right: 0;
      top: -30%;
    }
  }

  .Tuhui-container {
    padding-top: 60px;
  }
}
</style>
